<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<view class="nav-title">提现</view>
		</view>
		
		<!-- 提现表单 -->
		<view class="withdraw-form">
			<view class="balance-info">
				<text class="label">当前余额</text>
				<text class="amount">¥ {{userBalance}}</text>
			</view>
			
			<view class="input-group">
				<text class="label">提现金额</text>
				<view class="input-box">
					<text class="currency">¥</text>
					<input 
						type="digit"
						v-model="amount"
						placeholder="请输入提现金额"
						class="amount-input"
					/>
				</view>
				<text class="tip">最低提现金额：¥1.00</text>
			</view>
			
			<view class="quick-amounts">
				<view 
					v-for="(value, index) in quickAmounts"
					:key="index"
					:class="['quick-amount', amount === value ? 'active' : '']"
					@click="selectAmount(value)"
				>
					¥{{value}}
				</view>
			</view>
			
			<view class="withdraw-info">
				<view class="info-item">
					<text class="label">到账方式</text>
					<text class="value">微信钱包</text>
				</view>
				<view class="info-item">
					<text class="label">预计到账时间</text>
					<text class="value">实时到账</text>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="submitWithdraw">确认提现</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			userBalance: 0,
			amount: '',
			quickAmounts: [1, 5, 10, 20, 50, 100]
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		this.getUserBalance();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getUserBalance() {
			// TODO: 调用API获取用户余额
			this.userBalance = 5.20;
		},
		selectAmount(value) {
			this.amount = value.toString();
		},
		submitWithdraw() {
			if (!this.amount) {
				uni.showToast({
					title: '请输入提现金额',
					icon: 'none'
				});
				return;
			}
			
			const amount = parseFloat(this.amount);
			if (amount < 1) {
				uni.showToast({
					title: '最低提现金额为1元',
					icon: 'none'
				});
				return;
			}
			
			if (amount > this.userBalance) {
				uni.showToast({
					title: '余额不足',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '提现处理中'
			});
			
			// TODO: 调用提现API
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '提现申请已提交',
					icon: 'success',
					duration: 2000
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
			}, 1500);
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.status-bar {
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	padding: 0 15px;
}

.nav-left {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.withdraw-form {
	padding: 20px;
	background-color: #ffffff;
	margin-top: 10px;
}

.balance-info {
	margin-bottom: 30px;
	
	.label {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
		display: block;
	}
	
	.amount {
		font-size: 32px;
		font-weight: bold;
		color: #333333;
	}
}

.input-group {
	margin-bottom: 20px;
	
	.label {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
		display: block;
	}
	
	.input-box {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e9ecef;
		padding-bottom: 10px;
		margin-bottom: 10px;
		
		.currency {
			font-size: 24px;
			color: #333333;
			margin-right: 10px;
		}
		
		.amount-input {
			flex: 1;
			font-size: 24px;
			color: #333333;
		}
	}
	
	.tip {
		font-size: 12px;
		color: #999999;
	}
}

.quick-amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 30px;
	
	.quick-amount {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #e9ecef;
		border-radius: 8px;
		font-size: 14px;
		color: #666666;
		transition: all 0.3s ease;
		
		&.active {
			background: #fff5f5;
			border-color: #ff6b6b;
			color: #ff6b6b;
		}
	}
}

.withdraw-info {
	background-color: #f8f9fa;
	border-radius: 8px;
	padding: 15px;
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		
		&:not(:last-child) {
			margin-bottom: 10px;
		}
		
		.label {
			color: #666666;
		}
		
		.value {
			color: #333333;
		}
	}
}

.submit-section {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background-color: #ffffff;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.submit-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&:active {
		opacity: 0.9;
	}
}
</style> 